<template>
  <div class="warp">
    <div class="side">
      <div class="header">
        <div class="one">
          <el-popover placement="top" width="160" v-model="visibleLou">
            <p>你将删除此楼栋及楼栋下所有数据？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visibleLou = false"
                >取消</el-button
              >
              <!-- visible = false隐藏显示 -->
              <el-button type="primary" @click="removeLou">确定</el-button>
            </div>
            <el-button slot="reference">删除楼栋</el-button>
          </el-popover>
        </div>
        <div class="news">
          <el-button
            plain
            class="newsTower"
            style="margin-left: 10px; margin-right: 10px"
            @click.prevent="tower()"
            >新建楼栋</el-button
          >
        </div>

        <div class="new">
          <el-button plain @click="copyLou = true">复制楼栋</el-button>

          <el-dialog title="复制楼栋" :visible.sync="copyLou">
            <div class="line"></div>
            <span style="color: red; margin-bottom: 30px"
              >提示：复制楼栋同时复制该楼层下所有构建</span
            >
            <el-row :gutter="15" style="margin-top: 30px">
              <el-form
                ref="elForm"
                :model="numberLou"
                :rules="rules"
                size="medium"
                label-width="100px"
              >
                <el-col :span="10">
                  <el-form-item label="复制楼栋" prop="numberLou">
                    <el-input
                      v-model="numberLou"
                      :placeholder="numberLou"
                      :disabled="true"
                      clearable
                      :style="{ width: '50%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <div class="dao">到</div>

                <el-col :span="9">
                  <el-form-item label="" prop="changeBuildNo">
                    <el-input
                      v-model="changeBuildNo"
                      placeholder="自定义输入"
                      clearable
                      :style="{ width: '50%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
            <div slot="footer" class="dialog-footer">
              <el-button @click="copyLou = false">取 消</el-button>
              <el-button type="primary" @click="copyLous">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
      <div class="bottom">
        <!-- 左边楼层菜单 -->
        <span
          class="el-icon-caret-bottom"
          style="margin-left: 100px; width: 200px"
          >这是一个项目名称</span
        >
        <table style="margin-left: 100px; margin-top: 20px; width: 200px">
          <tr
            v-for="(item, index) in louList"
            :key="index"
            @click="TrClick(louList[index])"
          >
            <!-- v-model="louList[index]" -->
            <input
              :disabled="handleEditList[index]"
              v-model="louList[index]"
              name="option"
              style="width: 70px"
              @change="handleInputChange"
              value="value"
              ref="input"
            />

            <el-button
              type="text"
              icon="el-icon-edit"
              circle
              style="margin-left: 20px"
              size="mini"
              @click="handleEdit(index)"
            ></el-button>
          </tr>
        </table>
      </div>
    </div>
    <div class="right">
      <el-row :gutter="1">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="108px"
        >
          <el-col :span="9">
            <el-form-item label="构件类型:">
              <el-select v-model="comTypeVal" placeholder="构件类型">
                <el-option
                  v-for="item in comType"
                  :key="item.comTypeVal"
                  :value="item"
                  @click.native="componenTypeClick"
                  filterable="true"
                  filter-method="componenTypeClick"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="构件名称:" prop="phonenumber">
              <el-select v-model="CompomentNameval" placeholder="构件名称">
                <el-option
                  v-for="(item, index) in CompomentName"
                  :key="index"
                  :value="item.compomentName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="large">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <!-- 添加构件 -->
      <el-row :gutter="10" class="mb8" style="padding-right: 80px">
        <el-col :span="1.5">
          <el-button type="primary" @click="opens = true">添加构件</el-button>

          <el-dialog title="添加构件" :visible.sync="opens">
            <el-form
              ref="form"
              :model="addComponent"
              :rules="rules"
              label-width="80px"
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item label="楼栋" prop="addComponent">
                    <el-input
                      v-model="addComponent"
                      :placeholder="addComponent"
                      :disabled="true"
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <div>
                <el-row :gutter="14">
                  <el-form
                    ref="form"
                    :model="formData"
                    :rules="rules"
                    size="medium"
                    label-width="120px"
                  >
                    <el-col :span="9">
                      <el-form-item label="楼层范围:" prop="field103">
                        <el-input-number
                          v-model="num"
                          controls-position="right"
                          @change="handleChange"
                          :min="1"
                          :max="100"
                        ></el-input-number>
                      </el-form-item>
                    </el-col>

                    <el-col :span="9" style="margin-left: 10px">
                      <el-form-item label="到" prop="">
                        <el-input-number
                          v-model="numTwo"
                          controls-position="right"
                          @change="handleChange"
                          :min="1"
                          :max="100"
                        ></el-input-number>
                      </el-form-item>
                    </el-col>

                    <el-col :span="13">
                      <el-form-item label="选择构件类型">
                        <el-select v-model="comTypeVal" placeholder="构件类型">
                          <el-option
                            v-for="item in comType"
                            :key="item.comTypeVal"
                            :value="item"
                            @click.native="componenTypeClick"
                            filterable="true"
                            filter-method="componenTypeClick"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-form>
                </el-row>
              </div>
            </el-form>
            <!-- 弹框表格  自己写死的数据tableData -->
            <el-form ref="form">
              <el-table border :data="tableData">
                <el-table-column label="构件名称">
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.compomentNo"
                      @change="selectrPoject"
                      placeholder="构件名称"
                    >
                      <el-option
                        v-for="(item, index) in CompomentNameTable"
                        :key="index"
                        :label="item.compomentName"
                        :value="item.compomentNo"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>

                <el-table-column
                  label="件数"
                  align="center"
                  key="userName"
                  prop="userName"
                  v-if="columns[1].visible"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                    <el-input-number
                      placeholder="请输入数字"
                      @blur="inputBlur(scope.row)"
                      v-model="scope.row.count"
                      controls-position="right"
                      :min="1"
                      :max="10000"
                    ></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  width="160"
                  class-name="small-padding fixed-width"
                >
                  <template slot-scope="scope" v-if="scope.row.userId !== 4">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-circle-plus-outline"
                      @click.prevent="addRow()"
                      v-hasPermi="['system:user:edit']"
                      >加一行</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click="handleDelete(scope.row)"
                      v-hasPermi="['system:user:remove']"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="ComponentSub">确 定</el-button>
              <el-button @click="opens = false">取 消</el-button>
            </div>
          </el-dialog>
        </el-col>
        <el-col :span="1.5">
          <el-dropdown>
            <el-button type="primary"> 楼层编辑 </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button type="text" @click="Copy = true">复制楼层</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button type="text" @click="DeleteClear = true"
                  >删除楼层</el-button
                >
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <el-col :span="1.5">
          <el-dropdown>
            <el-button type="primary"> 项目建模 </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button
                  type="text"
                  icon="el-icon-download"
                  size="mini"
                  @click="handleExport"
                  v-hasPermi="['system:user:export']"
                  >模板下载</el-button
                ></el-dropdown-item
              >
              <el-dropdown-item>
                <el-button
                  type="text"
                  icon="el-icon-upload2"
                  size="mini"
                  @click="handleImport"
                  v-hasPermi="['system:user:import']"
                  >Excel导入</el-button
                ></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>

        <!--  @queryTable="getList"  是right-toolbar里面的 -->
        <right-toolbar
          :showSearch.sync="showSearch"
          :columns="columns"
        ></right-toolbar>
      </el-row>

      <el-table
        :data="dataList"
        border
        height="550"
        style="width: 100%; margin-top: 20px"
        stripe
        v-hasPermi="['system:user:export']"
      >
        <el-table-column
          v-for="(item, index) in dataColumn"
          :key="index"
          :label="item"
          align="cenetr"
          @cell-click="openDetailColum"
        >
          <template slot-scope="scope">
            <span> {{ scope.row[index] }} </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 复制楼层的弹框 -->
      <el-dialog title="复制楼层" :visible.sync="Copy">
        <span style="color: red; margin-bottom: 17px"
          >提示：复制楼层同时新建该楼层下所有构件</span
        >
        <el-row :gutter="15">
          <el-form
            ref="elForm"
            :model="formDatas"
            :rules="rules"
            size="medium"
            label-width="100px"
          >
            <el-col :span="10">
              <el-form-item label="复制楼层" prop="dataColumnFloorVal">
                <el-select
                  v-model="dataColumnFloorVal"
                  placeholder="请输入楼层"
                >
                  <el-option
                    v-for="(item, index) in dataColumnFloor"
                    :key="index"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <div class="dao">到</div>

            <el-col :span="9">
              <el-form-item label="" prop="CopyFloorVal">
                <el-select v-model="CopyFloorVal" placeholder="请输入楼层">
                  <el-option
                    v-for="(item, index) in floorHund"
                    :key="index"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>

        <div slot="footer" class="dialog-footer">
          <el-button @click="Copy = false">取 消</el-button>
          <el-button type="primary" @click="CopyFloorButton">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 删除楼层 -->
      <el-dialog title="删除楼层" :visible.sync="DeleteClear">
        <span style="color: red; margin-right: 17px"
          >提示：该楼层下所有构件</span
        >
        <el-row :gutter="15">
          <el-form
            ref="elForm"
            :model="formDatas"
            :rules="rules"
            size="medium"
            label-width="100px"
          >
            <el-col :span="10">
              <el-form-item label="删除楼层：" prop="dataColumnFloorVal">
                <el-select
                  v-model="dataColumnFloorVal"
                  placeholder="请输入楼层"
                >
                  <el-option
                    v-for="(item, index) in dataColumnFloor"
                    :key="index"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>

        <div slot="footer" class="dialog-footer">
          <el-button @click="DeleteClear = false">取 消</el-button>
          <el-button type="primary" @click="DeleteFloor">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 用户导入对话框 -->
      <el-dialog
        :title="upload.title"
        :visible.sync="upload.open"
        width="400px"
        append-to-body
      >
        <el-upload
          ref="upload"
          :limit="1"
          accept=".xlsx, .xls,.pdf"
          :headers="upload.headers"
          :action="
            upload.url +
            '?projectNo=' +
            this.$route.query.projectNo +
            '&buildNo=' +
            encodeURIComponent(this.queryParams.buildNo)
          "
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="true"
          :on-preview="Previewf"
          drag
        >
          <!-- :data="data" 是绑定 el-upload里的-->
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip text-center" slot="tip">
            <span>仅允许导入Excel 格式文件。</span>
          </div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  listUser,
  getUser,
  delUser,
  addUser,
  updateUser,
  resetUserPwd,
  changeUserStatus,
} from "@/api/system/user";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import {
  createBuild,
  importTemplate,
  importData,
  copyLayer,
  addWidget,
  getCompomentTypeList,
  getFloorLayer,
  getFloorlist,
  delBuild,
  getCompomentList,
  copyBuild,
  delLayer,
  listProjectInfo,
  getProjectInfo,
  delProjectInfo,
  addProjectInfo,
  updateProjectInfo,
} from "@/api/project/ProjectInfo";

export default {
  // name: "User",
  dicts: ["sys_normal_disable", "sys_user_sex"],
  components: { Treeselect },
  data() {
    return {
      // 笔
      handleEditList: [true],

      // 弹框表格加一行
      tableData: [{ compomentNo: "", count: "" }],
      // 删除楼层的隐藏显示
      DeleteClear: false,
      //复制楼层时右边下拉框
      floorHund: [],

      compomentNameList: "",
      // 构件类型
      comType: [],
      comTypeVal: [],
      changeBuildNo: "",
      // 构件名称
      CompomentName: [],
      CompomentNameval: [],

      // 弹框构件名称
      CompomentNameTable: [],
      // 弹框构件名称下拉框的v-molade
      CompomentNameTablevalue: [],
      //  弹框的构件类型
      CompomentTypeTable: [],
      //  弹框的构件类型 v-molade
      CompomentTypeTableValue: [],

      // 添加构件的弹框 里面input 是置灰的 楼栋
      addComponent: "",
      // 添加构件的弹框 楼层范围
      num: "",
      numTwo: "",
      count: "",

      //楼层保存，导入用
      // 弹框的复制楼栋 input 置灰
      numberLou: "",
      myText: "",
      // 复制楼栋的按钮
      copyLou: false,
      projectNos: "",
      //  props:["name"],
      // visible 删除楼的隐藏
      visibleLou: false,
      // 添加构件 同时绑定form
      opens: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        num: "",
      },

      LouTable: [],
      dataList: [],
      dataColumn: [],
      dataColumnFloor: [],
      dataColumnFloorVal: [],

      // 查询参数
      queryParams: {
        newTypeNumber: "",
        oldTypeNumber: "",
        maxFloor: "",
        minFloor: "",
        floor: "",
        copyFloor: "",
        changeBuildNo: "",
        projectNo: "",
        buildNo: "",
        compomentNo: "",
        compomentType: "",
        changeBuildNo: "",
        minFloor: "",
        maxFloor: "",
        info: [
          {
            compomentNo: "",
            count: "",
          },
        ],
      },
      // 表格里的input

      clickCellIndex: null,
      clickCellLabel: "",
      input: "",
      visible: "",

      // 楼栋
      louList: [],
      // 楼栋表格
      LouTable: [],
      // 复制楼层
      CopyFloorVal: "",
      CopyFloor: {
        field103: undefined,
        field104: 3,
      },
      // 复制楼层的弹框
      Copy: false,

      elForm: {},
      // 可以绑定请求的数据
      formData: {
        field101: undefined,
        field102: 2,
      },
      formDatas: {
        CopyFloorVal: "",
        dataColumnFloor: "",
      },
      input: "",
      // 菜单写死的数据
      datas: [],
      restaurants: [],
      state: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 单选框
      radio1: "1",
      radio2: "1",

      // 按钮切换
      activeName: "second",
      // 弹框
      dialogTableVisible: false,
      dialogFormVisible: false,
      ble: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],

        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",

      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: undefined,

      // 部门名称
      deptName: undefined,
      // 默认密码
      initPassword: undefined,
      // 日期范围
      dateRange: [],
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/Project/ProjectInfo/importData",
      },
      // 查询参数
      TanParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined,
      },
      // 列信息
      columns: [
        { key: 0, label: `用户编号`, visible: true },
        { key: 1, label: `用户名称`, visible: true },
        { key: 2, label: `用户昵称`, visible: true },
        { key: 3, label: `部门`, visible: true },
        { key: 4, label: `手机号码`, visible: true },
        { key: 5, label: `状态`, visible: true },
        { key: 6, label: `创建时间`, visible: true },
      ],

      // 表单校验 必填的  在input里面prop ="field101"
      rules: {
        deptId: [
          {
            required: true,
            message: "请输入单行文本",
            trigger: "blur",
          },
        ],

        field103: [
          {
            required: true,
            message: "楼层范围",
            trigger: "change",
          },
        ],
        field101: [
          {
            required: true,
            message: "请输入单行文本",
            trigger: "blur",
          },
        ],
        field102: [
          {
            required: true,
            message: "请输入楼层",
            trigger: "blur",
          },
        ],
        field103: [
          {
            required: true,
            message: "楼层范围",
            trigger: "change",
          },
        ],
        field104: [],

        userName: [
          { required: true, message: "用户名称不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "用户名称长度必须介于 2 和 20 之间",
            trigger: "blur",
          },
        ],
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "用户密码长度必须介于 5 和 20 之间",
            trigger: "blur",
          },
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        phonenumber: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },

  created() {
    this.queryParams.projectNo = this.$route.query.projectNo;
    this.projectNos = this.$route.query.projectNo;

    // 编辑页的构件类型 一进来就渲染的
    getCompomentTypeList().then((res) => {
      let newArr = res.rows.map(function (value, index, array) {
        return array[index].componenType;
      });
      this.comType = newArr;
      this.CompomentTypeTable = newArr;
    });
    // 左边楼栋表
    getFloorlist(this.$route.query.projectNo).then((res) => {
      this.projectNos = this.$route.query.projectNo;
      this.louList = res.data;
      for(let i=0;i<this.louList.length;i++){
        this.handleEditList[i] =true;
      }
    });
    this.getTreeselect();
    this.getConfigKey("sys.user.initPassword").then((response) => {
      this.initPassword = response.msg;
    });
    
  },
  // 菜单用到的生命周期
  mounted() {
    this.restaurants = this.loadAll();
  },
  methods: {
    // 监听输入文本框的内容变化
    handleInputChange(e) {
      console.log(e.target.value);
      // this.$store.commit('setInputValue', e.target.value)
    },
    // 添加构件的确定按钮
    ComponentSub() {
      console.log("tabledata", this.tableData);
      this.queryParams.minFloor = this.num;
      this.queryParams.maxFloor = this.numTwo;
      //  this.queryParams.info.compomentNo = this.CompomentNameTable;
      this.queryParams.info = this.tableData;
      console.log("queryParams.info", this.queryParams);
      addWidget(this.queryParams).then((res) => {
        console.log(res);
        this.$message({
          message: "添加成功",
          type: "success",
        });
      });
      this.getFloorLayerTabel();
      this.opens = false;
      this.CompomentNameline();
      this.Trclick(this.numberLou);
    },
    // 表格
    openDetailColum(index) {
      console.log("Colum", index);
    },
    openDetailSpan(a) {
      console.log("Span", a);
    },
    openDetailTemplate(b) {
      console.log("Template", b);
    },
    // 删除楼层按钮
    DeleteFloor() {
      this.queryParams.floor = this.dataColumnFloorVal;
      delLayer(this.queryParams).then((res) => {
        console.log("删除楼层", res);
        this.$message({
          message: "删除成功",
          type: "warning",
        });
      });
      this.DeleteClear = false;
      this.getFloorLayerTabel();
      this.Trclick(this.numberLou);
    },
    // 复制楼层按钮
    CopyFloorButton() {
      this.queryParams.copyFloor = this.dataColumnFloorVal;
      this.queryParams.floor = this.CopyFloorVal;
      copyLayer(this.queryParams).then((res) => {
        this.$message({
          message: "复制成功",
          type: "success",
        });
        console.log("复制楼层", res);
      });

      this.getFloorLayerTabel();
      // this.Trclick(this.numberLou);
      this.Copy = false;
    },
    selectrPoject(e) {
      this.compomentNameList = e;
    },
    //点击获取构件类型，赋值给compomentNameList数组
    compomentNameListClick(idex, value) {
      // alert(index), alert(value);
      compomentNameList[index] = value;
    },
    //构件类型
    componenTypeClick() {
      this.CompomentNameline();
      // 编辑页的构件名称
      console.log(21354);
    },
    // 编辑页的构件名称接口
    CompomentNameline() {
      this.queryParams.compomentType = this.comTypeVal;
      getCompomentList(this.queryParams).then((res) => {
        // let Arr = res.data.map(function (value, index, array) {
        //   return array[index].compomentName;
        // });
        this.CompomentName = JSON.parse(JSON.stringify(res.data));
        this.CompomentNameTable = JSON.parse(JSON.stringify(res.data));
        console.log(this.CompomentName);

        console.log("构件名称", this.CompomentNameTable);
        // console.log("构件名称22", res.data);
      });
    },

    // 复制楼栋
    copyLous() {
      console.log(134543568);
      this.queryParams.buildNo = this.changeBuildNo;
      this.queryParams.changeBuildNo = this.numberLou;

      copyBuild(this.queryParams).then((res) => {
        // console.log("复制楼栋", res);
        // console.log(11111111);
      });

      this.copyLou = false;
      this.Floorlist();
    },

    // 封装的左边渲染的楼栋
    Floorlist() {
      getFloorlist(this.$route.query.projectNo).then((res) => {
        this.projectNos = this.$route.query.projectNo;
        this.louList = res.data;

        // console.log("项目标号", this.projectNo);
      });
    },

    // 删除楼栋
    removeLou() {
      console.log(2222);
      delBuild(this.queryParams).then((res) => {
        console.log(res);
      });
      this.Floorlist();
      this.visibleLou = false;
    },
    cancelLou() {
      this.visibleLo = true;
    },
    // 下拉菜单
    handleClick() {
      // alert('button click');
    },
    // 弹框表格 加一行
    addRow() {
      var list = {};
      this.tableData.unshift(list);
    },
    // 左边楼栋
    TrClick(val) {
      console.log(val);
      for (let i = 1; i < 101; i++) {
        this.floorHund.push(i + "");
      }
      this.numberLou = val;
      this.addComponent = val;
      console.log("tr", this.numberLou);
      this.queryParams.buildNo = val;
      this.queryParams.projectNo = this.projectNos;
      // 右边楼栋表格
      getFloorLayerTabel();
      getFloorLayer(this.queryParams).then((res) => {
        this.LouTable = res.data.dataTable;
        const code = res.code;
        const data = res.data.dataTable;
        if (code === 200) {
          this.dataColumn = data[0];
          this.dataColumnFloor = data[0];
          this.dataList = data.slice(1);
        }
        // console.log("项目标号", res.data);
        // console.log("表格", this.LouTable);
      });
      
    },
    getFloorLayerTabel() {
      getFloorLayer(this.queryParams).then((res) => {
        this.LouTable = res.data.dataTable;
        const code = res.code;
        const data = res.data.dataTable;
        if (code === 200) {
          this.dataColumn = data[0];
          this.dataColumnFloor = data[0];
          this.dataList = data.slice(1);
        }
        // console.log("项目标号", res.data);
        console.log("表格", this.LouTable);
      });
    },

    // 新建楼栋
    tower() {
      var list = "楼栋#";
      this.louList.unshift(list);
    },
    // 菜单 笔
    handleEdit(index) {
      for(let i=0;i<100;i++){
        this.handleEditList[i] =true;
      }
      console.log(index);
      this.handleEditList[index] = false;
      
      // let a = this.louList.filter((item) => {
      //   if (this.louList.includes(item) == false) return item;
      // });
      // for (let i = 0; i <= a.louList.length; i++) {
      //   a[i].sort = i + 1;
      // }

      console.log("index笔");
    },
    //添加构建弹框的删除一行
    handleDelete(index, row) {
      // this.tableData.foreach(item=>item.CompomentNameTable)
      for (let i = 0; i < this.tableData.length; i++) {
        if (
          this.tableData[i].CompomentNameTable == index.CompomentNameTable &&
          this.tableData.length != 1
        ) {
          this.tableData.splice(i, 1);
        } else {
          this.$message.error(" 已经是最后一条信息了");
        }
      }
    },

    // 复制楼栋按钮的弹出

    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: [],
      };
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表格里的input

    inputBlur(row) {
      this.clickCellIndex = null;
      this.clickCellLabel = "";
    },
    handleRowClick(row, column) {
      this.clickCellIndex = row.index;
      this.clickCellLabel = column.label;
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      /**
       * 此处绑定名称未确定
       */
      this.queryParams.componenType = this.comTypeVal;
      this.queryParams.compomentName = this.CompomentNameval;
      getFloorLayer(this.queryParams).then((res) => {
        this.LouTable = res.data.dataTable;
        const code = res.code;
        const data = res.data.dataTable;
        if (code === 200) {
          this.dataColumn = data[0];
          this.dataList = data.slice(1);
        }
        // console.log("项目标号", res.data);
      });

      // this.getList();
    },
    // 添加构件弹框的楼层范围
    handleChange(value) {
      console.log(value);
    },
    // 添加构件弹框的楼层
    Component() {
      //   addWidget(this.queryParams).then((res)=>{
      // console.log("添加构件弹框的楼层",res)
      //   })

      this.opens = false;
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.comTypeVal = "";
      this.CompomentNameval = "";
      // this.dateRange = [];
      // this.resetForm("queryForm");
      // this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleResetPwd":
          this.handleResetPwd(row);
          break;
        case "handleAuthRole":
          this.handleAuthRole(row);
          break;
        default:
          break;
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.getTreeselect();
      getUser().then((response) => {
        this.postOptions = response.posts;
        this.roleOptions = response.roles;
        this.open = true;
        this.title = "添加用户";
        this.form.password = this.initPassword;
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.getTreeselect();
      const userId = row.userId || this.ids;
      getUser(userId).then((response) => {
        this.form = response.data;
        this.postOptions = response.posts;
        this.roleOptions = response.roles;
        this.form.postIds = response.postIds;
        this.form.roleIds = response.roleIds;
        this.open = true;
        this.title = "修改用户";
        this.form.password = "";
      });
    },
    /** 重置密码按钮操作 */
    handleResetPwd(row) {
      this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        inputPattern: /^.{5,20}$/,
        inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
      })
        .then(({ value }) => {
          resetUserPwd(row.userId, value).then((response) => {
            this.$modal.msgSuccess("修改成功，新密码是：" + value);
          });
        })
        .catch(() => {});
    },
    /** 分配角色操作 */
    handleAuthRole: function (row) {
      const userId = row.userId;
      this.$router.push("/system/user-auth/role/" + userId);
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.userId != undefined) {
            updateUser(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              // this.getList();
            });
          } else {
            addUser(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              // this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    // handleDelete(row) {
    //   const userIds = row.userId || this.ids;
    //   this.$modal
    //     .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
    //     .then(function () {
    //       return delUser(userIds);
    //     })
    //     .then(() => {
    //       // this.getList();
    //       this.$modal.msgSuccess("删除成功");
    //     })
    //     .catch(() => {});
    // },
    /** 模板下载 */
    handleExport() {
      // importTemplate().then((res)=>{
      //   console.log("模板下载",res)
      // })
      this.download(
        "Project/ProjectInfo/importTemplate",
        {
          // ...this.queryParams,
        },
        `建模_${new Date().getTime()}.xlsx`
      );
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download(
        "system/user/importTemplate",
        {},
        `user_template_${new Date().getTime()}.xlsx`
      );
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.getFloorLayerTabel();
      // this.getList();
    },
    // 预览
    Previewf(file) {
      console.log(file);
      console.log(file.response);

      window.open(file.response);
      if (file) {
        const addTypeArray = file.name.split(".");
        const addType = addTypeArray[addTypeArray.length - 1];
        console.log(addType);
        if (addType === "pdf") {
          let routeData = this.$router.resolve({
            path: "/insurancePdf",
            query: { url: file.response, showBack: false },
          });
          window.open(routeData.href, "_blank");
        }
        //".rar, .zip, .doc, .docx, .xls, .txt, .pdf, .jpg,  .png, .jpeg,"
        else if (
          addType === "doc" ||
          addType === "docx" ||
          addType === "xls" ||
          addType === "xlsx"
        ) {
          window.open(
            "http://view.officeapps.live.com/op/view.aspx?src=" + file.response
          );
        } else if (addType === "txt") {
          window.open(file.response);
        } else if (["png", "jpg", "jpeg"].includes(addType)) {
          window.open(file.response);
        } else if (addType === "rar" || addType === "zip") {
          this.$message({
            message: "该文件类型暂不支持预览",
            type: "warning",
          });
          return false;
        }
      }
    },

    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
      this.getFloorlist(this.$route.query.projectNo);
    },

    //菜单element自带

    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style lang="scss" scoped>
.bottom {
  width: 30%;
  margin-top: 20px;
  text-align: center;
}
// 菜单楼层

input {
  border: 1px solid white;
}
input:focus {
  outline: 1px solid white;
}

.warp {
  width: 100%;
  display: flex;
}
.side {
  text-align: center;
  width: 30%;
  margin-left: 10px;
  height: 900px;

  .header {
    width: 200px;
    margin-top: 10px;
    display: flex;
  }
}
.right {
  margin-right: 180px;
  width: 60%;
  text-align: center;
  padding-left: 30px;

  // border: 1px solid gray;
}
// 侧面

.dao {
  position: absolute;
  left: 350px;
  top: 10px;
}
.line {
  width: 100%;
  position: absolute;
  top: 50px;
  right: 10px;
  border: 1px solid gray;
}
// 表格里的样式
// .out {
//   border-top: 40px #d6d3d6 solid; /*上边框宽度等于表格第一行行高*/
//   width: 0px; /*让容器宽度为0*/
//   height: 0px; /*让容器高度为0*/
//   border-left: 80px #bdbabd solid; /*左边框宽度等于表格第一行第一格宽度*/
//   position: relative; /*让里面的两个子容器绝对定位*/
// }

// b {
//   font-style: normal;
//   display: block;
//   position: absolute;
//   top: -40px;
//   left: -40px;
//   width: 50px;
// }

// em {
//   font-style: normal;
//   display: block;
//   position: absolute;
//   top: -25px;
//   left: -70px;
//   width: 55px;
// }

// 下拉

.el-icon-arrow-down {
  font-size: 12px;
}

.dao {
  position: absolute;
  left: 350px;
  top: 10px;
}
.outer {
  display: flex;
  margin-bottom: 10px;
}
.btn {
  margin-left: 10px;
  margin-right: 10px;
}

// table {
//   text-align: center;

//   // border: 1px solid black;
// }
// td {
//   border: 1px solid gray;
// }
// table th {
//   width: 100px;
//   border: 1px solid gray;
// }
// table,
// tr td {
//   border-top: 1px solid grey;
// }
// 左边楼栋输入框
input {
  border: 1px solid white;
}
input:focus {
  outline: 1px solid white;
}
</style>
